<template>
  <div>
    <van-nav-bar title="日历" left-arrow @click-left="onClickLeft" />
    <div class="content">
      <van-cell title="选择日期区间" :value="date" @click="show = true" />
      <van-calendar
        v-model="show"
        type="range"
        :formatter="formatter"
        :poppable="false"
        @confirm="onConfirm"
        :style="{ height: '500px' }"
      />

      <!-- 
            @confirm = "onConfirm"
            confirm-text = "完成"
            confirm-disabled-text="请选择结束时间"
            color="#07C160"
           
         -->
    </div>
  </div>
</template>
  
  <script>
import { Calendar, NavBar, Cell } from "vant";
export default {
  data() {
    return {
      date: "",
      show: false,
    };
  },
  components: {
    [Calendar.name]: Calendar,
    [NavBar.name]: NavBar,
    [Cell.name]: Cell,
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onConfirm(date) {
      // console.log(date);
      const [start, end] = date;
      this.show = false;
      this.date = `${this.formDate(start)}-${this.formDate(end)}`;
      console.log(this.date);
    },
    formDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    formatter(day) {
      // console.log(day);
      const month = day.date.getMonth() + 1;
      const date = day.date.getDate();

      if (month === 9) {
        if (date === 10) {
          day.topInfo = "教师节";
        } else if (date === 11) {
          day.topInfo = "中秋节";
        } else if (date === 15) {
          day.text = "今天";
        }
      }

      if (day.type === "start") {
        day.bottomInfo = "入住";
      } else if (day.type === "end") {
        day.bottomInfo = "离店";
      }

      return day;
    },
  },
};
</script>
  
  
  <style lang="scss" scoped>
</style>